<template>
  <div style="overflow:auto;" ref="myactive">
    <div style="display:flex;">
        <div>
          活动名称：
          <el-input
           style="width:60%"
            placeholder="请输入活动名称"
            suffix-icon="el-icon-date"
            v-model="myactivein.activename">
          </el-input>
        </div>
        <div>
          活动类型：
          <el-select style="width:60%" v-model="myactivein.activetype" clearable placeholder="请选择活动类型">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div>
          加分类型：
          <el-select style="width:60%" v-model="myactivein.activescore" clearable placeholder="请选择加分类型">
            <el-option
              v-for="item in optionsscore"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <el-button  type="primary" round  @click="GetMyActive">查询</el-button>
    </div><br>
    <div>
        <div style="margin-top: 20px;text-align:left">
         <el-radio v-model="radios" label="2" border size="medium" @click.native="RadioActiveStatus(2)">全部</el-radio>
         <el-radio v-model="radios" label="0" border size="medium" @click.native="RadioActiveStatus(0)">已认证</el-radio>
         <el-radio  v-model="radios" label="1" border size="medium" @click.native="RadioActiveStatus(1)">未认证</el-radio>
         <el-button type="primary" style="margin-left:90%" @click="Selecttotalscore">总分查询</el-button>
        </div>
    </div><br>
    <div style="overflow:auto;">
        <el-table
        :data="tableData"
        border
        @sum-text="统计"
        ref="dataTable"
        :summary-method="getSummaries"
        :show-summary="true"
        :height="tableheight"
        :row-class-name="tableRowClassName">
        <el-table-column
          fixed
          label="方案"
          width="60">
          <template  slot-scope="scope">
            <i title="方案预览" class="el-icon-tickets" style="font-size:30px;cursor: pointer;" @click="download(scope.row.filePath)"></i>
          </template>
        </el-table-column>
        <el-table-column
          prop="activeName"
          label="活动名称"
          width="120">
        </el-table-column>
        <el-table-column
          label="活动类型"
          width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.type==0">院级活动</span>
            <span v-if="scope.row.type==1">校级活动</span>
            <span v-if="scope.row.type==2">社团活动</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="score"
          label="活动分数">
        </el-table-column>
        <el-table-column
          label="加分类型">
          <template slot-scope="scope">
            <span v-if="scope.row.secondScore==1">第二课堂分</span>
            <span v-if="scope.row.educationScore==1">德育分</span>
            <span v-if="scope.row.laborScore==1">劳动分</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="报名时间">
          <template slot-scope="scope">
            <span>{{ FormDataYYYYMMDD(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="活动状态">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status==0" type="info">未开始报名</el-tag>
              <el-tag v-if="scope.row.status==1" type="success">报名中</el-tag>
              <el-tag v-if="scope.row.status==2" type="warning">截止报名</el-tag>
              <el-tag v-if="scope.row.status==3" type="danger">已结束</el-tag>
            </template>
        </el-table-column>
        <el-table-column
          label="认证状态"
          :filters="[{ text: '已认证', value: 0 }, { text: '未认证', value: null },{ text: '未通过认证', value: 1 }]"
          :filter-method="filterTag"
          filter-placement="bottom-end"
          >
          <template slot-scope="scope">
            <el-tag
          :type="scope.row.certificationstatus === '0' ? 'primary' : 'success'"
          disable-transitions>
          <span v-if="scope.row.certificationstatus==0">已认证</span>
          <span v-if="scope.row.certificationstatus==1">未通过认证</span>
          <span v-if="scope.row.certificationstatus==null">未认证</span>
          </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="认证时间">
          <template slot-scope="scope">
            <span v-if="scope.row.certificationstatus!=null">{{ FormDataYYYYMMDD(scope.row.certificationdate) }}</span>
            <span v-if="scope.row.certificationstatus==null">......</span>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          width="210"
          label="操作">
          <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleDetails(scope.row)">详情</el-button>
          <el-button
          size="mini"
          type="success"
          @click="download(scope.row.filePath)">下载</el-button>
      </template>
        </el-table-column>
        </el-table>
    </div>
    <div style="text-align:center">
        <el-pagination
          background
          :page-size="30"
          :current-page="1"
          layout="prev, pager, next"
          :current-change="CurrentChange"
          :total="total">
        </el-pagination>
    </div>
    <div>
      <el-dialog
        title="详情"
        style="text-align:left"
        :visible.sync="dialogVisible"
        width="35%"
        :before-close="handleClose">
        <div>
          <span v-if="activedescription!=''">活动描述：{{activedescription}}。</span><br>
          <span v-if="activecontent!=''">活动内容：{{ activecontent }}。</span>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <div>
      <el-dialog
        title="详情"
        style="text-align:left"
        :visible.sync="dialogVisibles"
        width="35%"
        :before-close="handleClose">
        <span>活动次数：{{ score.count }}次</span><br>
        <span>第二课堂分：{{ score.secondscore }}分</span><br>
        <span>德育分：{{ score.educationscore }}分</span><br>
        <span>劳动分：{{ score.laborscore }}分</span>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisibles = false">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import request from '@/util/request';
export default {
    name:'MyScore',
    data(){
        return{
            total:1,//分页的页数
            radios:'2',
            pageNum:1,//第几页
            myactivein:{activename:'',activetype:'',activescore:'',activestatus:'0',pageNum:1,requerytype:1,certificationstatus:'2'},
            tableheight:window.innerHeight*0.55,//表格高度
            screenWindth:window.innerWidth,//监听页面高度参数
            screenHeight:window.innerWidth,//监听页面宽度参数
            options: [{
                    value:'',
                    lable:''
                },{
                  value: '0',
                  label: '校级'
                }, {
                  value: '1',
                  label: '院级'
                },{
                    value:'2',
                    label:'社团'
                }],//活动类型
                optionsscore:[
                    {
                        value:'',
                        label:''
                    },{
                        value:'0',
                        label:'第二课堂分'
                    },{
                        value:'1',
                        label:'德育分',
                    },{
                        value:'2',
                        label:'劳动分'
                    }
                    
                ],//加分类型
            tableData: [],//表格数据
            dialogVisible:false,
            dialogVisibles:false,
            activedescription:'',//活动描述
            activecontent:'',//活动内容
            notcertificationscore:0,
            score:{count:0,educationscore:0,laborscore:0,secondscore:0}
        }
    },
    updated () {
            this.$nextTick(() => {
                this.$refs['dataTable'].doLayout();
            })
        },
    mounted(){
        window.addEventListener('resize02',this.handResize);
        this.handResize();
        this.GetMyActive();
    },
    beforeDestroy(){
      //页面高---监听摧毁
      window.removeEventListener('resize02',this.handResize)
    },
    methods:{
      //页面大小
      handResize(){  
        const height=this.$refs.myactive.offsetHeight;
        const width=this.$refs.myactive.offsetWidth ;
        this.screenHeight=window.innerHeight*0.5;
        this.screenWindth=window.innerWidth*0.5;      
      },
      //获取我的活动信息
      GetMyActive(){
            request.post('/user/myParticipationActive',this.myactivein).then((res) => {
                    this.tableData=res.data.list;
                    this.total=res.data.total;
            })
            .catch(err =>{
                    console.log('错误信息：',err.message)
                    if (err.response) {
                console.error(err)
                this.$notify.error({
                  title:'错误',
                  message:err.message
                })
              } else {
                this.$notify.error({
                  title:'错误',
                  message:'网络错误'
                })
            }
               }
            )
      },
      //表格背脊颜色
      tableRowClassName({row, rowIndex}) {
          if (row.status==1) {
          return 'success-row';
        } else if (row.status==2) {
          return 'warning-row';
        }else{
          return 'error-row';
        }
      },
      //分页发送改变时
      CurrentChange(val)
        {
          this.myactivein.pageNum=val;
          this.GetMyActive();
      },
      //时间格式转换
      FormDataYYYYMMDD(val){
         return this.$common.formatDateToYYYYMMDD(val);
      },
      //方案下载
      download(path){
          request.get(`/file/download?fileName=${path}`).then(res=>{
            console.log('--->',res);
            if(res.data===null){
              this.$notify.error(res.msg)
              return
            }
            this.$notify.success('已成功下载到:'+res.data)     
          }).catch(err=>{
            if (err.response) {
                console.error(err)
                this.$notify.error({
                  title:'错误',
                  message:err.message
                })
              } else {
                this.$notify.error({
                  title:'错误',
                  message:'网络错误'
                })
            }
          })
      },
      //单选按钮分类
      RadioActiveStatus(val){
        if(val==0)
        {
          this.radios='0';
          this.myactivein.certificationstatus=val;
        }
        else if(val==1)
        {
          this.radios='1';
          this.myactivein.certificationstatus=val;
        }
        else if(val==2)
        {
          this.radios='2';
          this.myactivein.certificationstatus='';
        }
        this.GetMyActive();
        
      },
       //活动信息内容查看
       handleDetails(val){
        if(this.dialogVisible==false)
        {
          this.activedescription=val.activeDescription;
          this.activecontent=val.activeContent;
        }
        else
        {
          this.activecontent='';
          this.activedescription='';
        }
        this.dialogVisible=!this.dialogVisible;
      },
      //删除我的活动
      DeleteMyActive(value){
        if(value.certificationstatus==0)
        {
          this.$notify.warning('已认证，无法删除');
        }
        else{
          this.$confirm('删除后无法获取分数，确定要删除吗?', '提示信息', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          request.get(`/user/deletemyactive?id=${value.id}`,).then((res) => {
                if(res.data==true)
                {
                  this.$notify.success('删除成功');
                  this.GetMyActive();
                }else{
                  this.$notify.warning('删除失败，可尝试查询删除');
                }
        })
        .catch(err =>{
                console.log('错误信息：',err.message)
                if (err.response) {
                console.error(err)
                this.$notify.error({
                  title:'错误',
                  message:err.message
                })
              } else {
                this.$notify.error({
                  title:'错误',
                  message:'网络错误'
                })
            }
           }
        )
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
        }
      },
      //详情弹窗关闭
      handleClose(done) {
          done();
      },
      //表格合计
      getSummaries(param) {
        const { columns, data } = param;
        const sums = [];
        const notscore=[];
        const tobeverified=[];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '统计';
            return;
          }
          //let notcertificationscore=0;
          let certificationstatus='';
          data.map(item =>{
            certificationstatus=item.certificationstatus
          })  
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            if(certificationstatus===0)
            {
                sums[index] = values.reduce((prev, curr) => {
                const value = Number(curr);
              if (!isNaN(value)) {   
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            }
            else if(certificationstatus===null)
            {
                tobeverified[index] = values.reduce((prev, curr) => {
                const value = Number(curr);
              if (!isNaN(value)) {   
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            }
            else if(certificationstatus===1)
            {
                notscore[index] = values.reduce((prev, curr) => {
                const value = Number(curr);
              if (!isNaN(value)) {   
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            }
            if(sums[index]===undefined)
            {
                sums[3]='已认证分数：'+0;
            }
            else{
                sums[3]='已认证分数：'+sums[index];
            }
            if(tobeverified[index]===undefined)
            {
                sums[4]='待认证分数：'+0;
            }else{
                sums[4]='待认证分数：'+tobeverified[index]
            }
            if(notscore[index]===undefined)
            {
                sums[5]='认证未通过分数：'+0;
            }else{
                sums[5]='认证未通过分数：'+notscore[index]
            }
          } 
        });
        return sums;
      },
      //表格筛选
      filterTag(value, row) {
        return row.certificationstatus === value;
      },
      //总分数查询
      Selecttotalscore(){
        request.get('/user/selecttotalscore').then((res) => {
          this.score=res.data;
          this.dialogVisibles=true;
        
        })
        .catch(err =>{
            console.log('错误信息：',err.message)
            if (err.response) {
                console.error(err)
                this.$notify.error({
                  title:'错误',
                  message:err.message
                })
              } else {
                this.$notify.error({
                  title:'错误',
                  message:'网络错误'
                })
            }
           }
        )
      }
    },

}
</script>

<style>
.el-table .warning-row {
    background: oldlace;
  }
  .el-table .success-row {
    background: #f0f9eb;
  }
  .el-table .error-row {
    background: #f1858a96;
  }
</style>